<script setup lang="ts">

import VPDoc from 'vitepress/dist/client/theme-default/components/VPDoc.vue';
import VPButton from 'vitepress/dist/client/theme-default/components/VPButton.vue';

</script>

<template>

  <div class="hero">
    <img
        class="logo"
        src="/static/Logo256.png"
        width="256"
        height="256"
        alt="vitepress-helper"
    />
    <div class="name">shmtu-auth</div>
    <div class="text">
      上海海事大学 校园网 自动认证工具~
    </div>

    <div class="buttons">
      <VPButton
          tag="a"
          size="medium"
          theme="brand"
          text="快速开始"
          href="/1.Guide/0.Quick Start/1.Quick Start.html"
      >
      </VPButton>
      <VPButton
          tag="a"
          size="medium"
          theme="sponsor"
          text="Github仓库"
          href="https://github.com/a645162/shmtu-auth"
      >
      </VPButton>
    </div>
  </div>
  <p
      style="
      white-space: nowrap;
      display: flex;
      flex-flow: row nowrap;
      gap: 10px;
      justify-content: center;
    "
  >
    <img
        src="https://img.shields.io/badge/Python-3.5%2B-brightgreen"
        alt="python-version"
    />
    <img
        src="https://img.shields.io/github/license/a645162/shmtu-auth?label=license&logo="
        alt="license"
    />
  </p>
  <VPDoc/>

</template>

<style>
.hero {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
  justify-content: center;
  height: 60vh;
  gap: 20px;
}

.hero .logo {
  display: block;
}

.hero .name {
  line-height: 40px;
  font-size: 32px;
  font-weight: 700;
  white-space: pre-wrap;
  background: var(--vp-home-hero-name-background);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: var(--vp-home-hero-name-color);
}

.hero .text {
  color: var(--vp-c-text-2);
}

.hero .buttons {
  display: flex;
  flex-flow: row wrap;
  gap: 12px;
}
</style>
